{% extends "base.html" %}

{% block title %}商品列表{% endblock %}

{% block content %}
<div class="container py-4">
    <!-- 页面标题和购物车按钮 -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="mb-0">积分商城</h2>
        <a href="{{ url_for('view_cart') }}" class="btn btn-primary position-relative">
            <i class="bi bi-cart3"></i> 购物车
            {% if cart_count > 0 %}
            <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                {{ cart_count }}
            </span>
            {% endif %}
        </a>
    </div>

    <!-- 商品列表 -->
    <div class="row row-cols-1 row-cols-md-3 g-4">
        {% for product in products %}
        <div class="col">
            <div class="card h-100 shadow-sm product-card">
                {% if product.image %}
                <img src="{{ url_for('static', filename=product.image) }}" class="card-img-top" alt="{{ product.name }}">
                {% else %}
                <div class="card-img-top bg-light d-flex align-items-center justify-content-center" style="height: 200px;">
                    <i class="bi bi-image text-muted" style="font-size: 3rem;"></i>
                </div>
                {% endif %}
                <div class="card-body">
                    <h5 class="card-title">{{ product.name }}</h5>
                    <p class="card-text text-muted">{{ product.description }}</p>
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="points-badge">
                            <i class="bi bi-coin text-warning"></i>
                            <span class="ms-1">{{ product.points_required }} 积分</span>
                        </div>
                        <div class="stock-badge {% if product.stock > 0 %}text-success{% else %}text-danger{% endif %}">
                            <i class="bi bi-box-seam"></i>
                            <span class="ms-1">库存: {{ product.stock }}</span>
                        </div>
                    </div>
                </div>
                <div class="card-footer bg-transparent border-top-0">
                    <form action="{{ url_for('add_to_cart', product_id=product.id) }}" method="post" class="d-grid">
                        <div class="mb-2">
                            <div class="input-group">
                                <button type="button" class="btn btn-outline-secondary" onclick="updateQuantity(this, -1)">-</button>
                                <input type="number" name="quantity" value="1" min="1" max="{{ product.stock }}"
                                       class="form-control text-center quantity-input"
                                       onchange="checkPoints(this, {{ product.points_required }}, {{ current_user.points }})">
                                <button type="button" class="btn btn-outline-secondary" onclick="updateQuantity(this, 1)">+</button>
                            </div>
                            <div class="points-info text-center mt-1">
                                <small class="text-muted">需要 <span class="required-points">{{ product.points_required }}</span> 积分</small>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-outline-primary" 
                                {% if product.stock <= 0 %}disabled{% endif %}
                                data-points-required="{{ product.points_required }}"
                                data-stock="{{ product.stock }}">
                            <i class="bi bi-cart-plus"></i> 加入购物车
                        </button>
                    </form>
                </div>
            </div>
        </div>
        {% else %}
        <div class="col-12 text-center py-5">
            <i class="bi bi-emoji-frown display-1 text-muted"></i>
            <h3 class="mt-3 text-muted">暂无商品</h3>
        </div>
        {% endfor %}
    </div>
</div>

<style>
.product-card {
    transition: transform 0.2s, box-shadow 0.2s;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.points-badge, .stock-badge {
    font-size: 0.9rem;
}

.card-img-top {
    height: 200px;
    object-fit: cover;
}

.quantity-input {
    width: 60px !important;
}

.input-group .btn {
    z-index: 0;
}

.points-info.text-danger {
    animation: shake 0.5s;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
</style>

<script>
function updateQuantity(button, change) {
    const form = button.closest('form');
    const input = form.querySelector('input[name="quantity"]');
    const submitBtn = form.querySelector('button[type="submit"]');
    const pointsRequired = parseInt(submitBtn.dataset.pointsRequired);
    const stock = parseInt(submitBtn.dataset.stock);
    const currentPoints = {{ current_user.points }};
    
    let newValue = parseInt(input.value) + change;
    
    // 检查积分是否足够
    const totalPointsRequired = pointsRequired * newValue;
    if (totalPointsRequired > currentPoints && change > 0) {
        // 如果积分不足且是要增加数量，则阻止增加
        return;
    }
    
    // 确保数量在合理范围内
    newValue = Math.max(1, Math.min(newValue, stock));
    input.value = newValue;
    
    checkPoints(input, pointsRequired, currentPoints);
}

function checkPoints(input, pointsPerItem, currentPoints) {
    const form = input.closest('form');
    const submitBtn = form.querySelector('button[type="submit"]');
    const pointsInfo = form.querySelector('.points-info');
    const quantity = parseInt(input.value);
    const totalPointsRequired = pointsPerItem * quantity;
    
    // 更新显示的所需积分
    const requiredPointsSpan = form.querySelector('.required-points');
    requiredPointsSpan.textContent = totalPointsRequired;
    
    if (totalPointsRequired > currentPoints) {
        submitBtn.disabled = true;
        pointsInfo.classList.remove('text-muted');
        pointsInfo.classList.add('text-danger');
        pointsInfo.innerHTML = `<small>积分不足，还差 ${totalPointsRequired - currentPoints} 积分</small>`;
        
        // 禁用增加按钮
        const plusButton = form.querySelector('button[onclick*="+1"]');
        plusButton.disabled = true;
        plusButton.classList.add('disabled');
    } else {
        submitBtn.disabled = false;
        pointsInfo.classList.remove('text-danger');
        pointsInfo.classList.add('text-muted');
        pointsInfo.innerHTML = `<small>需要 <span class="required-points">${totalPointsRequired}</span> 积分</small>`;
        
        // 启用增加按钮
        const plusButton = form.querySelector('button[onclick*="+1"]');
        plusButton.disabled = false;
        plusButton.classList.remove('disabled');
    }
}
</script>
{% endblock %} 